创建react应用(2)

引入eslint依赖

yarn add -D eslint

初始化eslint配置文件

yarn eslint --init

这一步要回答几个问题，除了第3个问题必须选react，第4个问题必须选Browser，
其他的你可以根据自己的情况进行选择。

下面这些是我自己的选择。

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Google (https://github.com/google/eslint-config-google)
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-google@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-google@latest eslint@>=5.4.0
? Would you like to install them now with npm? Yes
Installing eslint-plugin-react@latest, eslint-config-google@latest, eslint@>=5.4.0
....
Successfully created .eslintrc.js file in /Users/jevi/projects/react-project
✨  Done in 247.48s.

修改.eslintrc.js

extends

找到'extends'属性，将值改为

'extends': ["eslint:recommended","plugin:react/recommended","google"]

数组里的最后一项取决于你前面的问题

? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Google (https://github.com/google/esl...

因为我选择了使用google的代码规范，所以这里写google。

settings

加入react版本配置

"settings": {
  "react": {
    "version": "detect"
  }
}

最终.eslintrc.js文件类似下面这样

module.exports = {
  'env': {
    'browser': true,
    'es6': true,
  },
  'extends': ["eslint:recommended","plugin:react/recommended","google"],
  'globals': {
    'Atomics': 'readonly',
    'SharedArrayBuffer': 'readonly',
  },
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': true,
    },
    'ecmaVersion': 2018,
    'sourceType': 'module',
  },
  'plugins': [
    'react',
  ],
  'rules': {
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
};

使用eslint检查代码

yarn eslint app/**/*.js

然后就会看到eslint检查到的错误，类似下面这样

/Users/jevi/projects/react-project/app/main.js
   1:22  error  Strings must use singlequote                   quotes
   2:19  error  Strings must use singlequote                   quotes
   4:1   error  Missing JSDoc comment                          require-jsdoc
   5:1   error  Expected indentation of 2 spaces but found 4   indent
   6:1   error  Expected indentation of 4 spaces but found 8   indent
   7:1   error  Expected indentation of 6 spaces but found 12  indent
   8:1   error  Expected indentation of 4 spaces but found 8   indent
   9:1   error  Expected indentation of 2 spaces but found 4   indent
  12:45  error  Strings must use singlequote                   quotes

✖ 9 problems (9 errors, 0 warnings)
  8 errors and 0 warnings potentially fixable with the `--fix` option.

webpack集成eslint

webpack在编译时，用eslint检查代码，可以让我们在开发阶段就能发现问题。

安装eslint-loader

yarn add -D eslint-loader

修改build/webpack.config.base.js

找到rules属性，该属性的值是个数组，给这个数组第一项插入以下内容

      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader"
      }

最终webpack.conf.base.js看起来就是下面这样

"use strict";
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, "../app/main.js"),
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "app/index.html"
        })
    ]
};

执行编译命令

最后执行编译命令yarn build:prod或者yarn build:dev，就会显示错误的代码，并且编译失败。